<script lang="ts" name="bottomsettings" setup>

// 给父组件传递参数使用
import router from "../route";
const props = defineProps({
  color:{
    type: String,
    default: "#000000"
  },
  model:{
    type: String,
    default: "time"
  }
})
const emit = defineEmits(["suspend","start","timepiece"]);

/**
 * 暂停
 */
const suspend = ():void=>{
  if (props.model==="time")
    emit("suspend")
}
/**
 * 恢复
 */
const start = ():void=>{
  emit("start")
}
/**
 * 计时器
 */
const timepiece = ():void=>{
  emit("timepiece")
}
/**
 * 跳转
 * @constructor
 */
const Tiao = (name:string):void=>{
  if (name)
    router.push({name:name})
}
const Minu = ():void=>{
  window.api.minimizewindow()
}
</script>

<template>
  <div class="settings">
    <el-icon title="暂停" class="settings-icon" @click="suspend" :color="color">
      <VideoPlay />
    </el-icon>
    <el-icon title="恢复" class="settings-icon" @click="start" :color="color">
      <VideoPause />
    </el-icon>
    <el-icon title="闹钟" class="settings-icon" @click="Tiao('AlarmClock')" :color="color">
      <AlarmClock/>
    </el-icon>
    <el-icon title="计时器" class="settings-icon" :color="color" @click="timepiece">
      <Timer/>
    </el-icon>
    <el-icon title="最小化" class="settings-icon" :color="color" @click="Minu">
      <Minus/>
    </el-icon>
    <el-icon title="设置" class="settings-icon" @click="Tiao('AppSettings')" :color="color">
      <Setting/>
    </el-icon>
  </div>
</template>

<style scoped>
.settings {
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  .settings-icon{
    margin: 0 5px;
  }
}
</style>
